<template>
	<div>
		<div class="regist-wrapper">
			<div class="regist-nav">
				<div class="regist-nav-list nav-tep  colorblue">验证手机号</div>
				<div class="regist-nav-list nav-tep" v-bind:class="{colorblue:bluetwo}">短信验证</div>
				<div class="regist-nav-list" v-bind:class="{colorblue:bluethree}">设置密码</div>
			</div>
			<div class="regist-main" v-show="tepone">
				<div class="regist-user">
					<input type="text" class="regist-name-input" placeholder="请设置用户名" maxlength="20" v-model="regitusername" @focus="loginname">
					<div class="regist-name-check" @click="checkUserName">检测</div>
				</div>
				<div class="warn">
					<div class="warm-show" v-if="usernamewram">
						<i class="warn-icon"></i>
						<span>{{usernametext}}</span>
					</div>
					<div class="code-seted" v-if="usernamedone">
						<span>可以使用的用户名</span>
					</div>
				</div>
				<div class="regist-user">
					<div class="regist-cuntry vux-1px-r">
						<select v-model="selected">
							<option v-bind:value="data.country_code" v-for="(data,index) in countryList">
								<span class="name">{{data.cn_name}}</span>
								<span class="number">+{{data.country_code}}</span>
							</option>
						</select>
					</div>
					<input type="text" v-model="phoneNum" class="regist-tel-input" placeholder="输入手机号" maxlength="15"  @focus="loginname">
				</div>
				<div class="warn">
					<div class="warm-show" v-show="numberWarm">
						<i class="warn-icon"></i>
						<span>{{numberText}}</span>
					</div>
				</div>
				<div class="regist-user form-group code">
					<input type="text" class="regist-ver-input tt-text" name="captcha" placeholder="输入图形验证码" v-model="picNumber" @focus="loginname">
					<img src="/captcha/default?0.7035211305985292" onclick="this.src='/captcha/default?'+Math.random()">
				</div>
				<div class="warn">
					<div class="warm-show" v-show="verifyWarm">
						<i class="warn-icon"></i>
						<span>{{verifyText}}</span>
					</div>
				</div>
				<button class="regist-sendmsg" @click="getVerifictionCode">获取验证码</button>
				<div class="regist-already"><a :href="'#/oauth/login'">已有账号，登陆</a></div>
				<div class="regist-user-agreement"><input type="checkbox" class="regist-check-agreement" v-bind:checked="checkced" v-model="checkstatus">注册及视为同意通心粉社区的<a :href="'#/oauth/useragreement'"><<用户协议>></a></div>
			</div>
			<div class="regist-tep-two" v-show="teptwo">
				<div class="msg-numb">短信验证码已发送至手机<span>{{phoneNum}}</span></div>
				<div class="tep2-wrap">
					<input type="tel" class="registeptwo-input" placeholder="输入验证码" v-model="msgverifitycode" maxlength="13" @focus="loginname">
					<button class="updata-tel vux-1px-l" v-bind:disabled="disabled" @click="resendMsg">{{sendmsgtext}}</button>
				</div>
				<div class="warn">
					<div class="warm-show" v-show="twonext">
						<i class="warn-icon"></i>
						<span>{{twonextwram}}</span>
					</div>
				</div>
				<div class="regist-tep2-next" @click="teptwonext">下一步</div>
			</div>
			<div class="tepthree-main" v-show="tepthree">
				<div class="set-password">
					<input :type="loginkeyword" class="tep3-password" placeholder="设置登陆密码" maxlength="15" v-model="rigistpassword">
					<a class="check-password" :class="{kanmima:yanjing}" @click="changePassWordtype"></a>
				</div>
				<div class="warn">
					<div class="warm-show" v-show="rigistwram">
						<i class="warn-icon"></i>
						<span>{{rigistwramtext}}</span>
					</div>
				</div>
				<button class="tepthree-reter" @click="registReter">确认</button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data () {
		    return {
		   	checkced:true,
		   	regitusername:'',
		   	usernamewram:false,
		   	usernametext:'',
		   	phoneNum:'',
		   	checkstatus:true,
		   	picNumber:'',
		   	numberWarm:false,
		   	numberText:'',
		   	verifyWarm:false,
		   	verifyText:'',
		   	usernamedone:false,
		   	loginkeyword:'password',
		    yanjing:false,
		    tepone:true,
		    teptwo:false,
		   	tepthree:false,
		   	bluetwo:false,
		   	bluethree:false,
		   	usernamestatus:'',
		   	msgverifitycode:'',
		   	time:60,
		   	sendmsgtext:'',
		   	disabled:true,
		   	twonext:false,
		   	twonextwram:'',
		   	rigistwram:false,
		   	rigistwramtext:'',
		   	rigistpassword:'',
		   	id:'',
		   	needVerify:1,
		   	noneedVerify:0,
		   	nationCode:86,
		   	selected:'86',
		   	countryList:[],
		    }
		},
		 methods: {
			checkUserName(){
				if(!this.regitusername){
	            	this.usernamewram=true;
	            	this.usernametext="用户名不能为空";
		        }else{
					let data = {'username':this.regitusername}//验证用户名
		            axios.post('/api/oauth/username_check',data).then((res)=>{
		              if(res.data.resp_msg.msg_code == 400){
		              	this.usernamewram=true;
		              	this.usernamedone=false;
	            		this.usernametext=res.data.resp_msg.msg_error.message;
		              }else{
		              	this.usernamewram=false;
			            this.usernamedone=true;
		            	}
		            });
				}
	        },
	        getVerifictionCode(){
		        let usernamedata = {'username':this.regitusername};
		        axios.post('/api/oauth/username_check',usernamedata).then((res)=>{
		        	this.usernamestatus=res.data.resp_msg.msg_code;
		        });
		        if(!this.regitusername){
		        	this.usernamewram=true;
	            	this.usernametext="用户名不能为空";
		        }else if(this.usernamestatus==400){
		         	this.usernamewram=true;
	            	this.usernametext="用户名不可用";
		        }else if(!this.phoneNum){
		        	this.numberWarm=true;
		        	this.numberText="手机号码不能为空";
		        }else if(this.picNumber.length!==4){
		        	this.verifyWarm=true;
		        	this.verifyText="验证码格式不对";
		        	this.numberWarm=false;
		        }else if(!this.checkstatus){
		        	//do nothing
		        }else{
		        	this.numberWarm=false;
		        	let data = {'mobile':this.phoneNum,'code':this.picNumber,'needVerify':this.needVerify,'nationCode':this.selected}
		            axios.post('/api/oauth/sms/sender/mobile_notused',data).then((res)=>{
		            	if(res.data.resp_msg.msg_code==400){
		            		this.verifyWarm=true;
		            		this.verifyText=res.data.resp_msg.msg_error.message;
		            	}else{
		            		this.verifyWarm=false;
		            		this.tepone=false;
		    				this.teptwo=true;
		    				this.bluetwo=true;
		    				this.timer();
		            	}
		        	})
		       	}
	        },
			loginname(){
				this.usernamewram=false;
				this.numberWarm=false;
				this.verifyWarm=false;
				this.usernamedone=false;
				this.twonext=false;
			},
			changePassWordtype(){
		 		if(this.loginkeyword==='password'){
		 			this.loginkeyword='tel';
		 			this.yanjing=true;
		 		}else{
		 			this.loginkeyword='password';
		 			this.yanjing=false;
		 		}
		 	},
		 	resendMsg(){
		 		this.time=60;
		 		let data = {'mobile':this.phoneNum,'needVerify':this.noneedVerify};
	            axios.post('/api/oauth/sms/sender/mobile_notused',data).then((res)=>{
	            	this.timer();
	            })
		 	},
		 	teptwonext(){
		 		let data = {'mobile':this.phoneNum,'code':this.msgverifitycode};
	            axios.post('/api/oauth/sms/check',data).then((res)=>{
	            	if(res.data.resp_msg.msg_code==400){
	            		this.twonext=true;
	            		this.twonextwram=res.data.resp_msg.msg_error.message;
	            	}else{
	            		this.twonext=false;
	            		this.teptwo=false;
	            		this.tepthree=true;
	            		this.bluethree=true;
	            	}
	            })
		 	},
		 	timer(){
		    	if(this.time>0){
					this.time--;
					this.sendmsgtext = this.time+"s后重新获取";
					var timer = setTimeout(this.timer,1000);
		      	}else if(this.time == 0){
					this.sendmsgtext = "获取验证码";
					clearTimeout(timer);
					this.disabled = false;
		        }
		    },
		    registReter(){
		    	let data = {'username':this.regitusername,'mobile':this.phoneNum,'password':this.rigistpassword}
	            axios.post('/api/oauth/regist_mobile',data).then((res)=>{
	            	if(res.data.resp_msg.msg_code==400){
	            		this.rigistwram=true;
	            		this.rigistwramtext=res.data.resp_msg.msg_error.message;
	            	}else{
	            		this.rigistwram=false;
	            		this.id=res.data.resp_data.id;
	            		this.$router.push('/oauth/choiceidentity/'+this.id);
	            	}
	            });
		    },
		},
		mounted() {
			axios.get('/api/oauth/country_code').then(ret => {
			this.countryList = ret.data.resp_data;
			});
		},
		computed: {
	
		}
}		
</script>
<style>
@import url("../../../styles/common/oauth/oauth-common.css");
.regist-wrapper{background: #eee;}
.regist-main{padding:12px;background: #fff;margin-top:10px;}	
.regist-user{height: 42px;border: 1px solid #eee;border-radius:3px;display: flex;}
.regist-user .regist-name-input{flex: 1;padding:6px 15px;line-height: 30px;}
.regist-user .regist-name-check{flex: 0 0 60px;width: 60px;line-height:42px;font-size: 15px;text-align: center;border-left: 1px solid #eee;margin-left:10px;}
.regist-user .regist-cuntry{flex:0 80px;width: 80px;margin-right:10px;padding:6px 10px;}
.regist-user .regist-cuntry select{display: block;width: 80px;height: 36px;}
.regist-user .regist-cuntry select option{display: block;width:80px;height: 36px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.regist-cuntry .name{display: block;height: 15px;line-height: 15px;color: #888;font-size: 14px;}
.regist-cuntry .number{display: block;height: 15px;line-height: 15px;color: #008cf0;font-size: 12px;padding-left:3px;}
.regist-user .regist-tel-input{flex:1;padding:6px 15px;}
.regist-user .regist-ver-input{flex:1;padding:6px 15px;}
.regist-user .picture-ver{flex:0 0 100px;width: 100px;margin-left: 10px;}
.form-group img{flex:0 0 120px;width: 120px;height:36px;margin: 3px 5px;}
.regist-sendmsg{height: 44px;width:100%;background: #008cf0;line-height: 44px;text-align: center;font-size: 15px;color: #fff;border-radius:5px;}
.regist-already{height: 25px;line-height: 25px;margin: 10px auto;text-align: right;}
.regist-already a{color: #008CF0;font-size: 14px;}
.regist-user-agreement{height:20px;line-height: 20px;color: #888;text-align: center;}
.regist-user-agreement .regist-check-agreement{display:inline-block;width: 15px;height: 15px;vertical-align:top;margin-top:2px;margin-right: 3px;}
.regist-user-agreement a{padding:0 5px;}
.regist-tep-two{background: #fff;margin-top: 10px;padding: 12px;}
.regist-tep-two	.msg-numb{height: 25px;line-height: 25px;font-size: 14px;}
.regist-tep-two	.msg-numb span{color: #008CF0;padding: 0 3px;}
.tep2-wrap{height:42px;margin:10px auto;border: 1px solid #eee;border-radius:3px;display: flex;}
.tep2-wrap .registeptwo-input{flex: 1;padding:6px 15px;height: 30px;line-height: 30px;}
.tep2-wrap .updata-tel{flex:0 0 100px;width: 100px;height:42px;color: #888;font-size:14px;line-height:42px;text-align: center;}
.regist-tep2-next{height: 44px;background: #008cf0;line-height: 44px;text-align: center;font-size: 15px;border-radius:5px;margin-top:5px;color: #fff;}
.tepthree-main{padding: 12px;background: #fff;margin-top: 10px;}
.tepthree-main	.set-password{height:42px;border: 1px solid #eee;border-radius:3px;display: flex;margin-bottom: 5px;}
.tepthree-main	.set-password .tep3-password{flex:1;padding: 6px 15px;height: 30px;line-height: 30px;}
.tepthree-main	.set-password .check-password{display: inline-block;flex:0 0 30px;width:30px;margin-left:20px;
background: url(../../../static/oauth-img/password-on.png) no-repeat;background-size:20px 20px;vertical-align: top;margin-top:11px;}
.tepthree-reter{height: 44px;width:100%;background: #008cf0;line-height: 44px;text-align: center;font-size: 15px;border-radius:5px;margin-top:5px;color: #fff;}
</style>